﻿<%@ page language="java" contentType="text/html; charset=UTF-8"
  pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html>
<html lang="zh-CN">

<head>

<%@ include file="/WEB-INF/include/meta.jsp"%>
<%@ include file="/WEB-INF/include/css.jsp"%>

</head>
<body>

  <div class="page-group">
    <div class="page page-current">
      <header class="bar bar-nav fs-header-small">
        <a
          href="${ctx.host}/orders?paymentStatus=${order.paymentStatus.alias}"
          class="icon icon-left pull-left back"></a>
        <h1 class="title">订单详情</h1>
      </header>
      <div class="content" style="margin-bottom: 2.7rem;">

        <div class="list-block media-list payment-list"
          style="margin-bottom: .5rem;">
          <ul>
            <li class="item-content">
              <div class="item-media">
                <a
                  href="${ctx.host}/products/${order.product.id}/view?source=order">
                  <img src="${cloud.prod}/${order.product.cover}"
                  style='width: 4rem;'>
                </a>
              </div>
              <div class="item-inner">
                <div class="item-title" style="white-space: normal;">${order.product.name}</div>
                <div class="item-ater"
                  style="white-space: normal; color: #777;">
                  <small>类型：${order.orderType.description}</small><br>
                  <c:if test="${not empty order.site}">
                    <small>门店：${order.site.name}</small>
                    <br>
                  </c:if>
                  <small>数量：${order.amount}</small>
                </div>
              </div>
            </li>
          </ul>
        </div>

        <div class="list-block media-list payment-list"
          style="margin-bottom: .5rem;">
          <ul>
            <li>
              <div class="item-content order-info">
                <div class="item-inner">
                  <div class="item-text">
                    <p>订单编号：${order.code}</p>
                    <p>
                      下单时间：
                      <fmt:formatDate value="${order.createTime}"
                        pattern="yyyy-MM-dd HH:mm" />
                    </p>
                    <c:if test="${order.paymentStatus.paid}">
                      <p>
                        支付时间：
                        <fmt:formatDate value="${order.payTime}"
                          pattern="yyyy-MM-dd HH:mm" />
                      </p>
                    </c:if>
                  </div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content order-amount">
                <div class="item-inner">
                  <div class="item-text">
                    <p>
                      支付金额：<span><small>￥</small> <fmt:formatNumber
                          value="${order.price / 100}" pattern="0.00"
                          maxFractionDigits="2" /></span>
                    </p>
                  </div>
                </div>
              </div>
            </li>
            <c:if test="${order.orderType.others}">
              <li>
                <div class="item-content order-info">
                  <div class="item-inner">
                    <div class="item-text">
                      <p>身份证号：${order.attrs['identificationCard'].value}</p>
                      <p>收货地址：${order.attrs['shipping_address'].value}</p>
                    </div>
                  </div>
                </div>
              </li>
            </c:if>
          </ul>
        </div>

        <c:if
          test="${order.paymentStatus.paid and order.orderType.online and order.onlineYear}">
          <div class="list-block media-list payment-list"
            style="margin-bottom: .5rem;">
            <ul>
              <li><c:choose>
                  <c:when test="${empty unused}">
                    <div class="item-content order-info">
                  </c:when>
                  <c:otherwise>
                    <a href="#"
                      class="item-link item-content open-unused">
                  </c:otherwise>
                </c:choose>
                <div class="item-inner">
                  <div class="item-text">
                    <p>未使用：${fn:length(unused)}</p>
                  </div>
                </div> <c:choose>
                  <c:when test="${empty unused}">
          </div>
          </c:when>
          <c:otherwise>
            </a>
          </c:otherwise>
          </c:choose>
          <c:if test="${not empty unused}"></c:if>
          </li>
          <li><c:choose>
              <c:when
                test="${empty finishedCourseRounds and empty onGoingCourseRounds}">
                <div class="item-content order-info">
              </c:when>
              <c:otherwise>
                <a href="#" class="item-link item-content open-used">
              </c:otherwise>
            </c:choose>
            <div class="item-inner">
              <div class="item-text">
                <p>已购买：${fn:length(finishedCourseRounds) + fn:length(onGoingCourseRounds)}</p>
              </div>
            </div> <c:choose>
              <c:when
                test="${empty finishedCourseRounds and empty onGoingCourseRounds}">
      </div>
      </c:when>
      <c:otherwise>
        </a>
      </c:otherwise>
      </c:choose>
      </li>
      <li>
        <div class="item-content order-info">
          <div class="item-inner">
            <div class="item-text">
              <p>
                已转赠：${give}
                <c:if test="${give ne 0}">
                  <span class="pull-right">受赠人：${donee}</span>
                </c:if>
              </p>
            </div>
          </div>
        </div>
      </li>
      </ul>
    </div>
    </c:if>

    <c:choose>
      <c:when test="${order.paymentStatus.paid}">
        <%-- <c:if test="${order.orderType.offline or order.orderType.year}">
              <div class="content-block" style="margin: 0px;">
                <p><a href="${ctx.host}/profile/courses" class="button button-big button-success button-fill" style="background-color: #FDDD32; color: #000;">查看课程</a></p>
              </div>
            </c:if> --%>
        <c:if test="${order.orderType.offline and !order.investiged}">
          <div class="content-block" style="margin: 0px;">
            <p>
              <a
                href="${ctx.host}/orders/${order.id}/investigation-offlines"
                class="button button-big button-success button-fill"
                style="background-color: #FDDD32; color: #000;">完善信息</a>
            </p>
          </div>
        </c:if>
        <c:if
          test="${order.orderType.online and !order.onlineYear and !order.investiged}">
          <div class="content-block" style="margin: 0px;">
            <p>
              <a href="${ctx.host}/orders/${order.id}/investigations"
                class="button button-big button-success button-fill"
                style="background-color: #FDDD32; color: #000;">完善信息</a>
            </p>
          </div>
        </c:if>
      </c:when>
      <c:when test="${order.paymentStatus.unpaid}">
        <c:choose>
          <c:when
            test="${order.orderType.others and !order.hasAttribute('shipping_address')}">
            <div class="content-block" style="margin: 0px;">
              <p>
                <a
                  href="${ctx.host}/orders/shipping-address?order=${order.id}"
                  class="button button-big button-success button-fill"
                  style="background-color: #FDDD32; color: #000;">填写收货地址</a>
              </p>
            </div>
          </c:when>
          <c:otherwise>
            <div class="content-block" style="margin: 0px;">
              <form action="${ctx.host}/pay" method="POST">
                <input type="hidden" name="order" value="${order.id}">
                <p>
                  <button type="submit"
                    class="button button-big button-success order-pay button-fill button-block">去支付</button>
                </p>
              </form>
            </div>
          </c:otherwise>
        </c:choose>
      </c:when>
      <c:otherwise></c:otherwise>
    </c:choose>

  </div>
  <!-- End Content -->

  </div>
  </div>

  <c:if test="${not empty unused}">
    <div class="popup popup-unused">
      <div class="content-block">
        <header class="bar bar-nav fs-header-small">
          <a href="#" class="icon icon-left pull-left back close-popup"></a>
          <h1 class="title">未使用优惠券</h1>
        </header>
        <div class="content">
          <c:if test="${empty unused}">
            <p class="text-center"
              style="margin-top: 5rem; color: #999;">您暂无优惠券哦</p>
          </c:if>
          <c:forEach var="coupon" items="${unused}">
            <c:choose>
              <c:when
                test="${coupon.status.claimed && coupon.restDay > 0}">
                <a href="${ctx.host}/profile/coupon/${coupon.id}">
                  <div class="list-block media-list coupon">
                    <ul>
                      <li><label
                        class="label-checkbox item-content">
                          <div class="item-inner">
                            <div class="item-text">
                              <h2 class="coupon-amount">
                                <c:choose>
                                  <c:when
                                    test="${coupon.template.discountType.percent}">全额</c:when>
                                  <c:otherwise>
                                    <span>￥</span>${coupon.amount / 100}
                                </c:otherwise>
                                </c:choose>
                              </h2>
                              <div class="coupon-info">
                                <p class="coupon-title">${coupon.templateName}</p>
                                <p class="coupon-date">
                                  有效时间：
                                  <fmt:formatDate
                                    value="${coupon.effectiveStartDate}"
                                    pattern="yyyy-MM-dd" />
                                  &nbsp;至&nbsp;
                                  <fmt:formatDate
                                    value="${coupon.effectiveEndDate}"
                                    pattern="yyyy-MM-dd" />
                                </p>
                              </div>
                            </div>
                          </div>
                      </label></li>
                    </ul>
                  </div>
                </a>
              </c:when>
              <c:when
                test="${coupon.status.claimed && coupon.restDay <= 0}">
                <div class="list-block media-list coupon used">
                  <ul>
                    <li><label class="label-checkbox item-content">
                        <div class="item-inner">
                          <div class="item-text">
                            <h2 class="coupon-amount">
                              <c:choose>
                                <c:when
                                  test="${coupon.template.discountType.percent}">全额</c:when>
                                <c:otherwise>
                                  <span>￥</span>${coupon.amount / 100}
                                </c:otherwise>
                              </c:choose>
                            </h2>
                            <div class="coupon-info">
                              <p class="coupon-title">${coupon.templateName}</p>
                              <p>已过期</p>
                            </div>
                          </div>
                        </div>
                    </label></li>
                  </ul>
                </div>
              </c:when>
              <c:when test="${coupon.status.occupied}">
                <div class="list-block media-list coupon used">
                  <ul>
                    <li><label class="label-checkbox item-content">
                        <div class="item-inner">
                          <div class="item-text">
                            <h2 class="coupon-amount">
                              <c:choose>
                                <c:when
                                  test="${coupon.template.discountType.percent}">全额</c:when>
                                <c:otherwise>
                                  <span>￥</span>${coupon.amount / 100}
                                </c:otherwise>
                              </c:choose>
                            </h2>
                            <div class="coupon-info">
                              <p class="coupon-title">${coupon.templateName}</p>
                              <p>该优惠券已被占用</p>
                            </div>
                          </div>
                        </div>
                    </label></li>
                  </ul>
                </div>
              </c:when>
            </c:choose>
          </c:forEach>
        </div>
      </div>
    </div>
  </c:if>
  <c:if
    test="${not empty finishedCourseRounds or not empty onGoingCourseRounds}">
    <div class="popup popup-used">
      <div class="content-block">
        <header class="bar bar-nav fs-header-small">
          <a href="#" class="icon icon-left pull-left back close-popup"></a>
          <h1 class="title">已购买课程</h1>
        </header>
        <div class="content">

          <div class="content-block-title course-type">
            <p>在营课程</p>
          </div>
          <div class="list-block media-list no-margin"
            style="margin-top: 0px;">
            <ul>
              <%@ include
                file="/WEB-INF/jsps/course/going-course-list.jsp"%>
            </ul>
          </div>

          <%@ include
            file="/WEB-INF/jsps/course/finished-course-list.jsp"%>

        </div>

      </div>
    </div>
    </div>
  </c:if>

  <%@ include file="/WEB-INF/include/script.jsp"%>
  <d:resource type="script" root="${ctx.resource}/build"
    src="js/page/trading/order-view.js" />
  <script type="text/javascript">
			require([ 'page/trading/order-view' ], function(page) {
				page.init()
			})
		</script>
</body>
</html>
